@<template>
      <el-container class="home-contaniner">
          <!-- 头部区域 -->
        <el-header >
            <div>
                <img src="../assets/img/heima.png" alt="">
                <span>电商后台管理系统</span>
            </div>
            <el-button type="info" @click="logout">退出</el-button>
        </el-header>

        <el-container>
          
            <!-- 侧边栏 -->
            <el-aside ref="asideRef" class="aside" :width="isCollapse ? '64px' : '200px'">
              <div class='toggle-button' @click="closeAside">|||</div>
                <el-menu background-color="#323744" text-color="#fff"
                active-text-color="#5aa9fb" :unique-opened="true"
                :collapse="isCollapse" :collapse-transition="false"
                :router="true" :default-active="isActiveItem"
                > 
                  <!-- 一级菜单 -->
                  <el-submenu v-for="menu in menuList" :key="menu.id" :index='menu.id+""'> 
                    <!-- 一级菜单模板区域 -->
                    <template slot="title">

                      <!-- 图标 -->
                      <i :class="iconsObj[menu.id]"></i>

                      <!-- 文本 -->
                      <span>{{menu.authName}}</span>

                    </template>

                    <!-- 二级菜单 -->
                    <el-menu-item v-for="cMenu in menu.children" :key="cMenu.id" :index='cMenu.path' @click="beActive(cMenu.path)"> 
                      <template>
                        <i class="el-icon-menu"></i>
                        <span>{{cMenu.authName}}</span>
                      </template>
                    </el-menu-item>

                  </el-submenu>

                </el-menu>
            </el-aside>

            <!-- 内容区 -->
            <el-main>
                <router-view />
            </el-main>
        </el-container>
      </el-container>
  
</template>

<script>
export default {
  components: {
  },
  data() {
    return {
      // 左侧菜单数据
      menuList: [],
      // 一级菜单图标
      iconsObj: {
        '125': 'iconfont icon-user',
        '103': 'iconfont icon-tijikongjian',
        '101': 'iconfont icon-shangpin',
        '102': 'iconfont icon-danju',
        '145': 'iconfont icon-baobiao',
      },
      isCollapse: false,
      isShow: true,
      isActiveItem: '',
    }
  },
  created() {
    
    this.menus()
    this.isActiveItem = window.sessionStorage.getItem('path')
  },
  methods: {
    logout() {
      window.sessionStorage.clear();
      this.$message.success("退出成功");
      setTimeout(() => {
        this.$router.push("/login");
      }, 1500);
    },
    // 获取侧边栏数据
    async menus() {
      const { data: res } = await this.$http.get('menus')
      if(res.meta.status != 200) return this.$message.error(res.meta.msg )
      this.menuList = res.data
      console.log(res)
    },

    // 菜单折叠
    closeAside() {
      this.isCollapse = !this.isCollapse
     
    },
    // 点击二级菜单,存储path
    beActive(path) {
      window.sessionStorage.setItem('path',path)
      this.isActiveItem = path;
    }
  },
  
};
</script>

<style lang='less' scoped>
.home-contaniner {
    height: 100%;
}
.el-header {
    background-color:#373b40;
    display: flex;
    justify-content: space-between;
    align-items: center;

    > div {
      display: flex;
      align-items: center;

      > span {
      color: #fff;
      margin-left: 15px;
      }
    }
    

}
.el-menu {
  border-right: 0;
}

.el-aside {
    background-color: #323744;
    height: 100%;
    .toggle-button {
      background-color: #545c6f;
      width: 100%;
      height: 20px;
      padding: 2px 0;
      line-height: 20px;
      text-align: center;
      cursor: pointer;
      letter-spacing: 0.2em;
    }
}
.iconfont {
  margin-right: 5px;
}
</style>